<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getDruidStat } from '../../../../api/system/dbInfo'

// 定义接口类型
interface MonitorData {
	url: string
	driverClassName: string
	username: string
	activeCount: number
	poolingCount: number
}

const loading = ref(true)
const monitorData = ref<MonitorData>({
	url: '',
	driverClassName: '',
	username: '',
	activeCount: 0,
	poolingCount: 0
})

// 获取数据源信息
const getMonitorData = async () => {
	try {
		const res = await getDruidStat()
		console.log('数据源信息响应:', res)
		if (res.data.code === 1 && res.data.data) {
			const data = res.data.data
			monitorData.value = {
				url: data.url || '',
				driverClassName: data.driverClassName || '',
				username: data.username || '',
				activeCount: Number(data.activeCount) || 0,
				poolingCount: Number(data.poolingCount) || 0
			}
			console.log('处理后的监控数据:', monitorData.value)
		}
	} catch (error) {
		console.error('获取数据源信息失败:', error)
		ElMessage.error('获取数据源信息失败')
	} finally {
		loading.value = false
	}
}

// 刷新数据
const refreshData = () => {
	getMonitorData()
}

onMounted(() => {
	getMonitorData()
})
</script>

<template>
	<div class="system-info">
		<el-card class="monitor-card">
			<template #header>
				<div class="card-header">
					<h3>数据库监控</h3>
					<el-button-group>
						<el-button type="primary" @click="refreshData">
							<el-icon><Refresh /></el-icon>刷新
						</el-button>
					</el-button-group>
				</div>
			</template>

			<el-descriptions :column="2" border>
				<el-descriptions-item label="数据库URL">{{ monitorData.url }}</el-descriptions-item>
				<el-descriptions-item label="驱动类">{{
					monitorData.driverClassName
				}}</el-descriptions-item>
				<el-descriptions-item label="用户名">{{ monitorData.username }}</el-descriptions-item>
				<el-descriptions-item label="当前活动连接数">{{
					monitorData.activeCount
				}}</el-descriptions-item>
				<el-descriptions-item label="连接池数量">{{
					monitorData.poolingCount
				}}</el-descriptions-item>
			</el-descriptions>
		</el-card>
	</div>
</template>

<style lang="scss" scoped>
.system-info {
	.monitor-card {
		margin-bottom: 20px;

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			h3 {
				margin: 0;
			}
		}
	}

	:deep(.el-descriptions) {
		margin-bottom: 20px;
	}
}
</style>
